<template>
    <div>
        <!--头像昵称-->
        <div style="display: flex;background:white">
            <img :src="header" class="user-Home-top-1-1">
            <div class="username">{{username}}</div>
            <div class="buttonSubmit">
                <van-button
                        round
                        color="gray"
                        size="small"
                        v-on:click="onSubmit"
                >发布
                </van-button>
            </div>
        </div>
        <div style="background: white">
            <van-form >
                <van-field
                        v-model="message"
                        rows="4"
                        autosize
                        type="textarea"
                        maxlength="200"
                        placeholder="分享你的想法..."
                        show-word-limit
                        :rules="[{ required: true}]"
                />
                <van-uploader :after-read="afterRead"
                              multiple :max-count="1"
                              v-model="fileList"
                />

            </van-form>
        </div>


    </div>
</template>

<script>
    import { Uploader } from 'vant';
    import Vue from 'vue';
    import {Field,Form} from 'vant';
    import {Button} from 'vant';
    import { Toast } from 'vant';
    Vue.use(Toast);
    import {ApiService} from "../../axios/apiService";
    Vue.use(Uploader);
    Vue.use(Button);
    Vue.use(Field);
    Vue.use(Form)
    const getUserDetail = new ApiService("/userHome/User")

    export default {
        name: "postEditor",
        data() {
            return {
                fileList: [],
                header: "",
                username: "",
                user:{},
                url:'',
            }
        },
        mounted() {
            this.getUserMessage()
        },
        methods:{
            onSubmit() {
                console.log(this.message);
                console.log(this.url);
                const inputPost  = new ApiService("/inputPost")
                inputPost.getParams({
                    userId:inputPost.getCookie("userid"),
                    postText:this.message,
                    postPictureUrl:this.url,
                })
                Toast("发布成功！")
                this.$router.push("post")


            },
            async afterRead(file) {
                console.log("this.afterRead()")
                //初试化
                let OSS = require('ali-oss');
                // var testFile = new File();
                // console.log(testFile);

                let client = new OSS({
                    region: 'oss-cn-chengdu',
                    accessKeyId:'LTAI5tKbKKZo33r8EpDqgGWH',
                    accessKeySecret:'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
                    bucket: 'jingzai-pethome',
                });
                //此时可以自行将文件上传至服务器
                try {
                    // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
                    // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
                    console.log(new Date().getTime())
                    var ti = new Date().getTime()
                    let result = await client.put('/img/'+ti+'.jpg',file.file)
                    console.log(result)
                    console.log("图片链接："+result.url)
                    this.url =  result.url

                } catch (e) {
                    console.log(e);

                }

            },
    /*        afterRead(file){
                console.log("上传测试");
                console.log(file);
                let formData = new FormData();
                formData.append("file",file.file);
                const uploadImg = new ApiService("/upload")
                uploadImg.post(formData).then(res=> {
                    console.log("res.data.code"+res.data.code)
                    if(res.data.code == 200) {
                        //this.userBook.imgs.push(res.data.data);
                        console.log("图片路经:"+res.data.data)

                        this.url = res.data.data;
                        console.log(this.fileList)
                    }else {
                       // Dialog.alert(res.data.message);
                        console.log("文件上传失败")
                    }
                })


            },*/
            getUserMessage(){//获取当前用户信息
                console.log("用户id:"+getUserDetail.getCookie("userid"));
                var userId = getUserDetail.getCookie("userid");
                getUserDetail.getViewById(userId).then(res=>{
                    console.log(res.data);//随便打印一下后端传来的数据
                    this.header = res.data.headerUrl;
                    console.log(this.header);
                    this.username = res.data.name;

                })
            }
        }
    }
</script>

<style scoped>
    .buttonSubmit {
        margin-top: 18px;
        right: 20px;
        position: absolute;
    }

    .user-Home-top-1-1 {
        width: 54px;
        height: 54px;
        margin-top: 10px;
        margin-left: 6px;
        border-radius: 50%;
    }
    .username {
        font-size: 20px;
        margin-top: 16px;
        margin-left: 7px;
        font-weight: 600;
    }
</style>